Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(toolbar): adds color variant #10284

Merged
merged 5 commits into from
Apr 29, 2024

Conversation

srambach
Copy link
Member

What: Closes #10226

Additional issues: Followup to patternfly/patternfly#6490

@srambach srambach requested review from a team, tlabaj, kmcfaul, mattnolting and mcoker and removed request for a team and mattnolting April 16, 2024 20:49
@patternfly-build
Copy link
Contributor

patternfly-build commented Apr 16, 2024

Copy link
Contributor

@mcoker mcoker left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! Left a couple of questions, only blocker might be that we should update id="toolbar-".

Comment on lines 23 to 28
<Checkbox
label="Secondary"
isChecked={isSecondary}
onChange={(_event, checked) => setisSecondary(checked)}
id="isSecondaryCheckbox"
/>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we add the ability to see all of the variants? Looks like the way it is now toggles between secondary and primary, which we should at least call out that it's secondary when checked, and primary when unchecked, which is different from the default (no value for colorVariant). Seems like it might be more clear if we showed primary, secondary, and no-background.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought of that but followed the drawer model, which has a no-background modifier but only showed an example for secondary - and also I didn't know how to make a dropdown work lol. Maybe I can pair program with someone to do that?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would say it may be nice to see all the color variants. We could lay them out individually instead of with a dropdown since there's only 3 (similar to how we show Alert or Label), but if we want to go the dropdown route feel free to ping me and I can help out. @srambach

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@sarah, we should probably update the Drawer example as well. I agree that we should show all variants.


return (
<React.Fragment>
<Toolbar id="toolbar-" colorVariant={isSecondary ? 'secondary' : 'primary'}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<Toolbar id="toolbar-" colorVariant={isSecondary ? 'secondary' : 'primary'}>
<Toolbar id="toolbar-color-variant" colorVariant={isSecondary ? 'secondary' : 'primary'}>

@@ -50,6 +50,8 @@ export interface ToolbarProps extends React.HTMLProps<HTMLDivElement>, OUIAProps
ouiaId?: number | string;
/** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
ouiaSafe?: boolean;
/** Color variant of the toolbar */
colorVariant?: 'no-background' | 'primary' | 'secondary';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Question for react-dev - should we have a default which will unset colorVariant? Without a colorVariant set, the toolbar background can be dynamic depending on how it's used. By default, a toolbar's background is transparent (same as colorVariant="no-background") except when it's sticky, then it's the primary background (same as colorVariant="primary")

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would usually lean towards having the "default" case be where a user would leave out the colorVariant prop entirely, and only apply the colors if the prop is present. But we've done both ways in different areas, so either works.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did a quick search to see what we do with other color variant props. It looks like the Drawer has a color variant that has a default option. So I would lean towards adding one here as well for consistency.

Copy link
Contributor

@mcoker mcoker left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm! my other questions aren't blockers

@srambach srambach linked an issue Apr 25, 2024 that may be closed by this pull request
Copy link
Contributor

@tlabaj tlabaj left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking good Sarah! I responded to a couple of threads in your PR.

<Toolbar id="toolbar-color-variant" colorVariant={isSecondary ? 'secondary' : 'primary'}>
<ToolbarContent>
<ToolbarItem>
<SearchInput aria-label="Items example search input" />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just to give this a unique name:

Suggested change
<SearchInput aria-label="Items example search input" />
<SearchInput aria-label="With secondary color example search input" />

Copy link
Contributor

@tlabaj tlabaj left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@tlabaj tlabaj merged commit 0f321d1 into patternfly:v6 Apr 29, 2024
13 checks passed
@patternfly-build
Copy link
Contributor

Your changes have been released in:

Thanks for your contribution! 🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Toolbar - add support for background color variants
6 participants